<template>
  <div class="screen-container" @touchmove.prevent>
    <div class="head">工单筛选</div>
    <formMainListItem
      v-for="(mod) in list"
      :key="mod.title+formType"
      :mod="mod"
      class="item"
      @showPick="showPick"
      @changeInput="changeInput"
    ></formMainListItem>
    <div class="footer">
      <button class="btn-size left" @click="resetClick">重置</button>
      <button class="btn-size right" @click="sureClick">确定</button>
    </div>
    <van-popup v-model:show="show" round position="bottom">
      <van-picker
        :columns="getSelectList"
        @cancel="onCancel"
        @confirm="onConfirm"
      />
    </van-popup>
    <van-popup v-model:show="showDate" round position="bottom">
      <van-date-picker
        :v-model="currentDate"
        @cancel="onCancel"
        @confirm="onConfirm"
      />
    </van-popup>
    <van-calendar v-model:show="showCalendar" type="range" @confirm="onDateConfirm" @cancel="onCancel" :min-date="calendarMinDate"/>


  </div>
</template>
<script setup>
import { defineProps, onMounted,computed } from "vue";
import formMainListItem from "@/components/formMainListItem.vue";
import { useFormManage } from "@/category/useFormManage";
import { FormTypeEnum } from "@/utils/enum";
import { formatDelayPeriod, formartCreateTime } from "@/utils/format";
import { globalEvent } from '@/main'; // 这里是你的主文件路径
const {
  show,
  formParams,
  showDate,
  showCalendar,
  getSelectList,
  currentDate,
  calendarMinDate,
  onCancel,
  onConfirm,
  onDateConfirm,
  showPick,
  getClassList,
  changeInput
} = useFormManage();

const props = defineProps({
  formType: {
    type: String,
    default: FormTypeEnum.TODO,
  },
});

onMounted(() => {
  //获取一级分类
  getClassList(1, "");
});

const todoList = computed(() => {
  return [
    {
      title: "一级分类",
      content: formParams.value.contentCategory,
      formart: formParams.value.contentCategory,
      type: "options",
    },
    {
      title: "二级分类",
      content: formParams.value.contentParentCategory,
      formart: formParams.value.contentParentCategory,
      type: "options",
    },
    {
      title: "转交日期",
      content: formParams.value.createTime,
      formart:formartCreateTime(formParams.value.createTime),
      type: "calendar",
      placeholder: "年月日:时分-年月日:时分",
    },
    {
      title: "工单编号",
      content: formParams.value.workOrderNumber,
      type: "input",
    },
  ];
});

const deleyList = computed(() => {
  return [
    {
      title: "工单编号",
      content: formParams.value.workOrderNumber,
      type: "input",
    },
    { title: "申请人", content: formParams.value.delayCreator, type: "input" },
    {
      title: "申请天数",
      content: formParams.value.delayPeriod,
      formart: formatDelayPeriod(formParams.value.delayPeriod),
      type: "options",
    },
    {
      title: "申请时间",
      content: formParams.value.createTime1,
      formart:formartCreateTime(formParams.value.createTime1),
      type: "calendar",
      placeholder: "年月日:时分-年月日:时分",
    },
  ];
});

const backList = computed(() => {
  return [
    {
      title: "工单编号",
      content: formParams.value.workOrderNumber,
      type: "input",
    },
    {
      title: "退单人员",
      content: formParams.value.returnPerson,
      type: "input",
    },
    {
      title: "退单时间",
      content: formParams.value.createTime2,
      formart:formartCreateTime(formParams.value.createTime2),
      type: "calendar",
      placeholder: "年月日:时分-年月日:时分",
    },
  ];
});

const list = computed(() => {
  switch (props.formType) {
    case FormTypeEnum.TODO:
      return todoList.value;
    case FormTypeEnum.DELAY:
      return deleyList.value;
    case FormTypeEnum.ROLLBACK:
      return backList.value;
    default:
      return todoList.value;
  }
});

const resetClick = () => {
  formParams.value = {}
  formParams.value.formType = props.formType
  globalEvent.emit('myGlobalEvent', formParams.value);
};

const sureClick = () => {
  // 触发全局事件，传递一些数据
  formParams.value.formType = props.formType
  globalEvent.emit('myGlobalEvent', formParams.value);
};
</script>

<script>
export default {
  name: "formFilterView",
};
</script>

<style lang="less" scoped>
.screen-container {
  background: rgba(0, 0, 0, 0.5);
  height: 100%;
  width: 100vw;
  .head {
    background: white;
    font-size: 36px;
    font-weight: 600;
    color: #333333;
    line-height: 44px;
    height: 64px;
    padding-top: 40px;
    padding-left: 40px;
  }
  .item {
    height: 80px;
    padding: 0px 16px;
  }

  .footer {
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 168px;
    .btn-size {
      height: 88px;
      flex: 1;
      font-size: 32px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      line-height: 44px;
      border-radius: 4px;
      border: 2px solid #0378fe;
    }

    .left {
      margin: 0px 28px 0px 68px;
      color: #0378fe;
      background: white;
    }

    .right {
      margin: 0px 68px 0px 28px;
      background: #0378fe;
      color: #fefeff;
    }
  }
}
</style>
